@extends('admin.layouts.app')
@section('product','active')

@section('style')
<!-- Bootstrap Select Css -->
<link href="{{asset('admin/plugins/bootstrap-select/css/bootstrap-select.css')}}" rel="stylesheet"/>
<!-- Bootstrap Material Datetime Picker Css -->
<link href="{{asset('admin/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css')}}" rel="stylesheet" />
<!-- Dropzone Css -->
<link href="{{asset('admin/plugins/dropzone/dropzone.css')}}" rel="stylesheet">
    <style>
        .dropzone .dz-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 7px;
    min-height: 100px;
}
    </style>
    @endsection

@section('content')
    <div class="container-fluid">
        <div class="block-header">
            <h2>
                商品管理
            </h2>
        </div>
        <!-- Basic Validation -->
        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="row">
                   <div class="card col-lg-7">
                        
                        <div class="header">
                            <h2>
                                添加新商品
                            </h2>
                            <ul class="header-dropdown m-r--5">
                                <li class="dropdown">
                                    <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" role="button">
                                        <i class="material-icons">
                                            more_vert
                                        </i>
                                    </a>
                                    <ul class="dropdown-menu pull-right">
                                        <li>
                                            <a href="javascript:void(0);">
                                                返回列表
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0);">
                                                重置
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="body">
                            <!-- Nav tabs -->
                            <form action="{{ route('product.store') }}" enctype="multipart/form-data" id="form_validation" method="POST">
                            <ul class="nav nav-tabs tab-nav-right" role="tablist">
                                <li role="presentation" class="active"><a href="#basic" data-toggle="tab">基本信息</a></li>
                                <li role="presentation"><a href="#attr" data-toggle="tab">商品属性</a></li>
                                <li role="presentation"><a href="#cuxiao" data-toggle="tab">促销相关</a></li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane fade in active" id="basic">
                                    
                                {{csrf_field()}}
                                <div class="form-group form-float">
                                    <select class="form-control show-tick" name="cate_id" id="cate_id">
                                        <option value="">
                                            -- 选择商品分类 --
                                        </option>
                                        @foreach($categories as $category)
                                        <option value="{{$category->id}}">
                                            {{$category->name}}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <input class="form-control" id="pro_name" name="pro_name" type="text">
                                            <label class="form-label">
                                                商品名称
                                            </label>
                                            <div class="help-info">
                                                必填:最多255字符
                                            </div>
                                        </input>
                                    </div>
                                </div>
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <input class="form-control" name="pro_info"  type="text">
                                            <label class="form-label">
                                                商品信息
                                            </label>
                                            <div class="help-info">
                                                必填:最多255字符
                                            </div>
                                        </input>
                                    </div>
                                </div>
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <input class="form-control" max="99999" min="2" name="pro_prices"  type="number">
                                            <label class="form-label">
                                                商品价格
                                            </label>
                                            <div class="help-info">
                                                *必填
                                            </div>
                                        </input>
                                    </div>
                                </div>
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <input class="form-control" id="pro_code" name="pro_code"  type="text">
                                            <label class="form-label">
                                                商品编号
                                            </label>
                                        </input>
                                    </div>
                                    <div style="padding-top:5px;">
                                        <input checked="checked" class="filled-in" id="auto" name="auto" type="checkbox" value="1">
                                            <label for="auto">
                                                自动生成
                                            </label>
                                        </input>
                                    </div>
                                </div>
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <input type="text" class="form-control"  value="200"  name="pro_stock" required>
                                        <label class="form-label">默认库存</label> 
                                    </div>
                                </div>
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <input class="form-control" max="99999" min="1" name="spl_prices"  type="number">
                                            <label class="form-label">
                                                市场价格
                                            </label>
                                            <div class="help-info">
                                                *必填
                                            </div>
                                        </input>
                                    </div>
                                </div>
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <input class="form-control" name="pro_img"  type="file">
                                            <div class="help-info">
                                                商品的缩略图
                                            </div>
                                        </input>
                                    </div>
                                </div>
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <textarea class="form-control no-resize" cols="30" name="pro_description"  rows="5"></textarea>
                                    </div>
                                </div> 
                                </div>
                                <div role="tabpanel" class="tab-pane fade" id="attr">
                                   
                                   <div class="card">
                                           <div class="header">
                                               <h2>
                                                   商品属性
                                               </h2>
                                           </div>
                                           <div class="body">
                                               <div class="form-group form-float">
                                                   <select class="form-control show-tick" name="type_id">
                                                       <option value="">
                                                           -- 选择商品类型 --
                                                       </option>
                                                       @foreach($types as $type)
                                                       <option value="{{$type->id}}">
                                                           {{$type->type_name}}
                                                       </option>
                                                       @endforeach
                                                   </select>
                                               </div>
                                               <div  id="body-type-attr">
                                                  
                                               </div>
                                           </div>
                                       </div>
                                </div>
                                <div role="tabpanel" class="tab-pane fade" id="cuxiao">
                                    <div class="card " style="">
                                        <div class="header">
                                            <h2>
                                                其他信息
                                            </h2>
                                        </div>
                                        <div class="body">
                                            <input checked="checked" class="filled-in" id="cuxiaos" name="is_promote" type="checkbox" value="1">
                                               <label for="cuxiaos">
                                                   开启促销
                                               </label>
                                           </input>
                                            <div class="form-group form-float">

                                                <div class="form-line">
                                                
                                                    <input class="form-control promote_price" disabled="disabled" max="99999" min="0" name="promote_price" disabled required="" type="number" value="0.00">
                                                        <label class="form-label">
                                                            促销价格
                                                        </label>

                                                </div>
                                            </div>

                                            <b>
                                                开始时间
                                            </b>
                                             <div class="input-group">
                                                <span class="input-group-addon">
                                                    <i class="material-icons">
                                                        date_range
                                                    </i>
                                                </span>
                                                <div class="form-line">
                                                    <input class="datetimepicker promote_price form-control datetime" disabled="disabled" name="promote_start_time" placeholder="格式 {{date('Y-m-d H:i:s')}}" type="text">
                                                    </input>
                                                </div>
                                            </div>
                                            <b>
                                                结束时间
                                            </b>
                                            <div class="input-group">
                                                <span class="input-group-addon">
                                                    <i class="material-icons">
                                                        date_range
                                                    </i>
                                                </span>
                                                <div class="form-line">
                                                    <input class="datetimepicker promote_price form-control datetime" disabled="disabled" name="promote_end_time" placeholder="格式 {{date('Y-m-d H:i:s')}}" type="text">
                                                    </input>
                                                </div>
                                            </div>
                                        </div> 
                                        <div class="card " style="">
                                        <div class="header">
                                            <h2>
                                                推荐
                                            </h2>
                                        </div>
                                        <div class="body">
                                            <p>
                                                  <input type="checkbox" id="test6" value="1" class="mr-2" name="is_hot" />
                                                  <label for="test6">热门</label>
                                                  <input type="checkbox" id="test7" value="1" class="mr-2" name="is_new" />
                                                  <label for="test7">新品</label>
                                                  <input type="checkbox" id="test8" value="1" class="mr-2" name="is_best" />
                                                  <label for="test8">精品</label>
                                           </p>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="header">
                                        <input class="filled-in" id="is_floor" name="is_floor" type="checkbox" value="1">
                                            <label for="is_floor">
                                                首页楼层推荐
                                            </label>
                                        </input>
                                    </div>
                                </div>
                                <button class="btn btn-primary waves-effect" id="sub" type="submit">
                                    SUBMIT
                                </button>
                            </form>

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="row">
                            
                            <div class="col-lg-12"> 
                                <div class="card " style="">
                                    <div class="header">
                                        <h2>
                                            商品子图
                                        </h2>
                                    </div>
                                    <div class="body">
                                        <form action="{{ route('cupload') }}" class="dropzone" enctype="multipart/form-data" id="frmFileUpload" method="post">
                                            {{csrf_field()}}
                                            <div class="dz-message text-center">
                                                <div class="drag-icon-cph">
                                                    <i class="material-icons">
                                                        touch_app
                                                    </i>
                                                </div>
                                                <h3>
                                                    点击或拖拽上传
                                                </h3>
                                            </div>
                                            <div class="fallback">
                                                <input id="file" multiple="" name="file[]" type="file"/>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- #END# Basic Validation -->
    </div>
    @endsection

@section('js-script')
    {{-- expr --}}
    <!-- Jquery Core Js -->
    <script src="{{ asset('admin/plugins/jquery/jquery.min.js') }}">
    </script>
    <!-- Bootstrap Core Js -->
    <script src="{{ asset('admin/plugins/bootstrap/js/bootstrap.js') }}">
    </script>
    <!-- Select Plugin Js -->
    <script src="{{ asset('admin/plugins/bootstrap-select/js/bootstrap-select.js') }}">
    </script>
    <!-- Slimscroll Plugin Js -->
    <script src="{{ asset('admin/plugins/jquery-slimscroll/jquery.slimscroll.js') }}">
    </script>
    <!-- Waves Effect Plugin Js -->
    <script src="{{ asset('admin/plugins/node-waves/waves.js') }}">
    </script>
    <!-- Jquery CountTo Plugin Js -->
    <script src="{{ asset('admin/plugins/jquery-countto/jquery.countTo.js') }}">
    </script>
    <!-- Morris Plugin Js -->
    <script src="{{ asset('admin/plugins/raphael/raphael.min.js') }}">
    </script>
    <script src="{{ asset('admin/plugins/morrisjs/morris.js') }}">
    </script>
    <script src="{{asset('admin/plugins/dropzone/dropzone.js')}}">
    </script>
    <!-- Bootstrap Material Datetime Picker Plugin Js -->
    <script src="{{asset('admin/plugins/momentjs/moment.js')}}"></script>
    <script src="http://momentjs.cn/downloads/moment-with-locales.min.js"></script>
    <script src="{{asset('admin/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js')}}"></script>

    <script>

     $(function(){
            //Datetimepicker plugin
        moment().locale('zh-cn'); 
        $('.datetimepicker').bootstrapMaterialDatePicker({
             lang : 'zh-cn', 
             format:('YYYY-M-D H:mm:ss'),
            clearButton: true,
            weekStart: 1,
            cancelText : '取消'
        });
     })
    </script>

    <script src="https://cdn.bootcss.com/ckeditor/4.7.3/ckeditor.js"></script>
    <script src="https://cdn.bootcss.com/ckeditor/4.7.3/adapters/jquery.js"></script>
    <!-- Custom Js -->
    <script src="{{ asset('admin/js/admin.js') }}">
    </script>
    {{--
    <script src="{{ asset('admin/js/pages/forms/advanced-form-elements.js')}}">
    </script>
    --}}
       <script>
   var route_prefix = "{{ url(config('lfm.prefix')) }}";
  </script>
     <script>
    $('textarea[name=pro_description]').ckeditor({
      height: 300,
      filebrowserImageBrowseUrl: route_prefix + '?type=Images',
      filebrowserImageUploadUrl: route_prefix + '/upload?type=Images&_token={{csrf_token()}}',
      filebrowserBrowseUrl: route_prefix + '?type=Files',
      filebrowserUploadUrl: route_prefix + '/upload?type=Files&_token={{csrf_token()}}'
    });
  </script>

    <script type="text/javascript">
        $(function () {
           //Dropzone
            var dri = Dropzone.options.frmFileUpload = {
                paramName: "file[]",
                uploadMultiple: true,
                maxFilesize: 10,
                parallelUplpads:8,
                // autoProcessQueue: false,
                maxFiles:10,
                init: function (){
                    // mydropzone = this;
                    // $("#sub").click(function(){

                    //     mydropzone.processQueue();
                    //     return false;

                    // // })
                    this.on("success",function(file,response){ 
                        console.log(response);
                       $.each(response,function(item,v){

                           $("#form_validation").append('<input name="file[]" type="hidden" value="'+v+'" />');

                       })
                    });
                }
                
            };

           
        })
        $(function(){
            $("select[name=type_id]").change(function(){
                       $("#body-type-attr").empty()
                var id = $(this).val();
                $.getJSON("{{ url('admin/attributes') }}"+"/"+id,function(res){
                       var html = '';
                        html+= '<p>';

                    $(res).each(function(k,v){
                        html += '<div class="form-group form-float"><div class="form-line"><label style="margin-top:10px">'+v.attr_name+'</label>';

                        if(v.attr_type == 1){
                            html += '<a onclick="addnew(this)" href="javascript:void(0)">[+]</a>';
                        }
                        if(v.attr_option_values == null){
                            html += '<input type="text" class="form-control" name="ga['+v.id+'][]" placeholder="'+v.attr_name+'"/>'
                        }
                        // html += '';

                        else
                        {
                            html += '<div class="row">'
                             html += '<div class="col-lg-4"><select name="ga['+v.id+'][]" class="form-control show-tick">';
                                    var opts = v.attr_option_values.split('|');
                                    html += '<option value="">请选择</option>'
                                        // console.log(opts);

                                    for(var i=0; i<opts.length; i++){
                                     html += '<option value="'+opts[i]+'">'+opts[i]+'</option>'

                                    }
                                html += '</select></div>'

                        } 
                        if(v.attr_type == 1){
                            html += '<div class="col-lg-5"><input type="text" name="attr_price['+v.id+'][]" class="form-control" style="border-bottom:1px solid #aaa;" placeholder="价格"/></div>'
                        }
                        html += '</div>';
                        html += '</div>';
                        html += '</div>'
                        html += '</p>'
                    })
                 $("#body-type-attr").html(html);

                })
                // alert();
            })
        })
        function addnew(a){
           var div =  $(a).parent();
           // console.log(div);
           if($(a).html() == '[+]')
           {
            var newDiv = div.clone();
            newDiv.find("a").html("[-]");
            div.after(newDiv);
           }
           else
            div.remove();
           // console.log(div);
        } 
    </script>
    <script src="{{ asset('admin/js/pages/ui/modals.js') }}"></script>
    {{-- <script src="{{ asset('admin/js/new_product_validate.js') }}"></script> --}}

    <script src="{{ asset('admin/plugins/bootstrap-notify/bootstrap-notify.js') }}"></script>

    <!-- Demo Js -->
    <script src="{{ asset('admin/js/demo.js') }}"> </script>
    <script type="text/javascript">
        $(function(){ 


                if($("#auto").attr('checked')){
                    $("#pro_code").attr('disabled','disabled');
                }
                $("#auto").click(function(){
                     
                     if($("#auto").attr('checked'))
                     {
                        $("#auto").removeAttr('checked');
                        $("#pro_code").removeAttr('disabled');
                     }else{
                        $("#pro_code").attr('disabled','disabled');
                        $("#auto").attr('checked','checked');
                     }


                })

                if($("#cuxiaos").attr('checked')){
                    $(".promote_price").removeAttr('disabled');
                }

                $("#cuxiaos").click(function(){
                     
                     if($("#cuxiaos").attr('checked'))
                     {
                        $("#cuxiaos").removeAttr('checked');
                        $(".promote_price").attr('disabled','disabled');
                     }else{
                        $(".promote_price").removeAttr('disabled');
                        
                        $("#cuxiaos").attr('checked','checked');
                     }


                })

        }); 
    </script>
    @endsection
</link>